<template>
  <view>
    <view class="notice-card">
       <u-parse :content="voteContent"></u-parse>
    </view>
    <view class="progress-card">
      <view class="progress-header">
          <text class="progress-title">{{isStatusText}}</text>
          <view class="progress-btns" v-if="btns.length > 0">
            <view class="progress-btn" v-for="(item,index) in btns" :key="index" @click="goToVotingResultsList">
                <text class="u-m-r-10">{{item.name}}</text>
                <view class="progress-btn-icon">
                    <u-icon name="arrow-right" size="10" color="#07B74D"></u-icon>
                </view>
            </view>
         
        </view>
      </view>
      <view class="progress-info">
        <view>
          发起方：
          <text class="progress-num u-m-l-10">{{voteInfo.initiator}}</text>
        </view>
        <view class="u-m-t-12">
          决议时间：<text class="progress-num u-m-l-10">
            {{dayjs(voteInfo.startDate).format('YYYY-MM-DD HH:mm')}}至{{dayjs(voteInfo.endDate).format('YYYY-MM-DD HH:mm')}}</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>  
import dayjs from 'dayjs'
export default {
  name: 'VoteFromCard',
  props:{
    formData:{
      deep:true,
      type:Object,
      default:()=>{}
    },
    voteContent:{
      type:String,
      default:''
    },
    VotingratioInfo:{
      deep:true,
      type:Object,
      default:()=>{}
    },
    isVotingInfo:{
      deep:true,
      type:Object,
      default:()=>{}
    },
    voteInfo:{
      deep:true,
      type:Object,
      default:()=>{}
    }
  },
  computed:{
    dayjs(){
      return dayjs
    },
    isStatusText(){
      let status=this.isVotingInfo.status
      return status==1?'投票进行中':status==2?'投票未开始':'投票已结束'
    }
  },
  data(){
    return {
        btns:[
            // {
            //     name:'投票进度',
            //     isArrow:true
            // },
            {
                name:'决议明细',
                isArrow:true
            }
        ]
    }
  },
  watch:{
    voteInfo:{
      handler(newVal){
      
      },
      deep:true,
      immediate:true
    }
  },
  methods:{
    goToVotingResultsList(){
      const {voteId,communityId}=this.formData
      uni.navigateTo({
        url: '/pages/votingresultslist/index?voteId=' + voteId + '&communityId=' + communityId
      })
    }
  }
}
</script>

<style scoped>
.notice-card {
  background: rgba(255,255,255,0.9);
  box-shadow: 0rpx 34rpx 144rpx 0rpx rgba(58,76,130,0.08), 0rpx 5rpx 14rpx 0rpx rgba(169,194,209,0.1);
  border-radius: 18rpx ;
  padding: 16rpx 38rpx;
  font-size: 30rpx;
  color: #333333;
  margin-bottom: 36rpx;
  font-weight: 400;
  margin-top: -84rpx;
 
}
.progress-card {
  background: #eafaf3;
  border-radius: 18rpx;
  padding:24rpx 20rpx 20rpx 20rpx ;
  /* margin-bottom: 24rpx; */
  margin: 0 7rpx 0 21rpx;
}
.progress-header {
  display: flex;
  justify-content: space-between;
  align-items: center;

}
.progress-title {
    font-weight: 500;
    font-size: 28rpx;
    color: #333333;
}
.progress-btns {
  display: flex;
  gap: 16rpx;
}
.progress-btn {
  height: 48rpx;
  border: 1rpx solid #07B74D;
  color: #07B74D;
  border-radius: 100rpx;
  font-size: 26rpx;
  padding: 0 16rpx;
  margin-left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.progress-info {
  margin-top: 24rpx;
  font-size: 26rpx;
  color: #7A7A7A;
 
}
.progress-num {
  color: #07B74D;
}
.progress-green {
  color: #07B74D;
}
.progress-btn-icon{
    position: relative;
    top: 0.5rpx;
}
</style>
